<template>
	<view class="search">
		<Header :isShow='isShow' :title="title" :isPlay="2" style="color: black;"/>
		<view class="container">
			<scroll-view scroll-y="true" >
				<view class="search-bar">
					<text class="iconfont icon-fangdajing"></text>
					<input type="text" placeholder="搜索歌曲" v-model="inputValue" @confirm="confirm(inputValue)" @input="handleToSuggest">
					<text class="iconfont" @click="inputOperation">x</text>
				</view>
				
				
				
				<!-- --------搜索推荐-------- -->
				
				<block v-if="inputValueNumber == 1">
					<view class="history" >
						<view class="history-head">
							<text>历史记录</text>
							<text class="iconfont icon-icon"  @click="delAll">删除所有</text>
						</view>
						<view class="history-list">
							<view v-for="item in historyList" @click="sendSuggestMsg(item)">{{item}}<text class="iconfont icon-icon" @click.stop="del(item)"></text></view>
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">
							热搜榜
						</view>
						<view class="search-hot-list">
							<view class="search-hot-list-item" v-for="(item, index) in searchHotList" :key="index" @click="toSearch(item.searchWord)">
								<view class="hot-list-item-index">
									{{index}}
								</view>
								<view class="hot-list-item-inFO">
									<view class="item-inFO-name">
										{{item.searchWord}}
									</view>
									<view class="item-inFO-content" v-if="item.content != ''">
										{{item.content}}
									</view>
								</view>
								<view class="hot-list-item-people">
									{{item.score}}
								</view>
							</view>
						</view>
					</view>
				</block>
				
				
				
				<!-- --------搜索结果列表-------- -->
				
				<block  v-else-if="inputValueNumber == 2">
					<view class="result-list">
						<view class="result-list-item" v-for="item in searchList" :key="item.id" @click="toPlayerMusic(item.id)">
							<view class="item-inFo">
								<view class="item-inFo-name">
									{{item.name}}
								</view>
								<view class="item-inFo-msg">
									<text v-for="item01 in item.ar">{{item01.name}}</text>
									<text v-if="item.al.name">-{{item.al.name}}</text>
								</view>
							</view>
							<view class="item-icon">
								<text class="iconfont icon-bofang_o"></text>
							</view>
						</view>
					</view>
				</block>
				
				
				
				<!-- --------搜索建议--------- -->
				
				<block v-else-if="inputValueNumber == 3">
					<view class="search-suggest">
						<view class="suggest-head">
							搜索“{{searchSuggestInfo}}”
						</view>
						<view class="suggest-list">
							<view class="suggest-list-item" v-for="(item, index) in searchSuggestList" :key="index" @click="sendSuggestMsg(item.keyword)">
								<text class="iconfont icon-fangdajing"></text>
								{{item.keyword}}
							</view>
						</view>
					</view>
				</block>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {ref, reactive} from 'vue'
	import Header from '@/components/header/index.vue'
	import {onLoad} from '@dcloudio/uni-app';
	import { searchHot, search, searchSuggest } from "@/common/api.js"
	export default {
		name: 'SearchList',
		components:{Header},
		setup() {
			// 状态
			let isShow = ref(true)
			let title = ref('搜索')
			let searchHotList = reactive([])
			let inputValue = ref('')
			let historyList = reactive([])
			let inputValueNumber = ref(1)
			let searchList = reactive([])
			let searchSuggestList = reactive([])
			let searchSuggestInfo = ref('')
			
			
			
			
			// 方法
			
			// 点击input框里的x清空input框
			let inputOperation = () => {
				inputValueNumber.value = 1
				inputValue.value = ''
			}
			
			// 点击热门搜索列表将列表项信息转给input框
			let toSearch = (value) => {
				inputValueNumber.value = 2
				inputValue.value = value
				historyList.unshift(value)
				historyList = [...new Set(historyList)]
				if(historyList.length >= 11){
					 historyList.pop()
				}
				uni.setStorage({
					key:'searchHistory',
					data: historyList
				})
				// 存储历史记录
				getSearchList(value)
			}
			
			// 在点击确定（回车）后显示搜索列表
			let confirm = (value) => {
				inputValueNumber.value = 2
			    historyList.unshift(value)
				historyList = [...new Set(historyList)]
				 if(historyList.length >= 11){
					 historyList.pop()
				 }
				 uni.setStorage({
				 	key:'searchHistory',
					data: historyList
				 })
				 
				 // 存储历史记录
				 getSearchList(value)
			}
			
			// 删除点个搜索信息
			let del = (value) => {
				historyList = reactive(historyList.filter(val =>{
					return val !== value
				}))
				uni.setStorage({
					key:'searchHistory',
					data: historyList
				})
			}
			
			// 删除所有搜索过信息
			let delAll = () => {
				historyList = reactive([])
				uni.setStorage({
					key:'searchHistory',
					data: historyList
				})
			}
			
			
			// 请求搜索列表
			let getSearchList = async(value) =>{
				let res = await search(value)
				searchList.splice(0, 1, ...res)
			}
			
			
			// 跳转到音乐播放页面
			let toPlayerMusic = (id) => {
				uni.reLaunch({
					url: `../playerMusic/playerMusic?id=${id}&uid=${1}`
				})
			}
			
			// 显示建议框
			let handleToSuggest = async(ev) => {
				let value = ev.detail.value
				inputValueNumber.value = 3
				if(!value){
					inputValueNumber.value = 1
				}
				searchSuggestInfo.value = value
				let res = await searchSuggest(value)
				searchSuggestList.splice(0, 1, ...res)
			}
			
			// 实现点击建议列表的列表项将数据转到input框
			let sendSuggestMsg = (value) => {
				confirm(value)
				inputValue.value = value
				searchHotList = reactive([])
			}
			
			
			// 生命周期
			onLoad( async() => {
				// 网络请求，获取榜单数据
				const res = await searchHot()
				searchHotList.push(...res)
				// 向本地存储搜索记录
				uni.getStorage({
					key:'searchHistory',
					success:(res) =>{
						historyList.push(...res.data)
					}
				})
			}) 
			
			
			return{
				isShow,
				title,
				searchHotList,
				inputValue,
				historyList,
				inputValueNumber,
				searchList,
				searchSuggestList,
				searchSuggestInfo,
				// 方法
				inputOperation,
				confirm,
				getSearchList,
				toSearch,
				del,
				delAll,
				toPlayerMusic,
				sendSuggestMsg,
				handleToSuggest
			}
		}
	}
</script>

<style scoped>
.container{width: 100%;height: calc(100vh - 75px);overflow: hidden;}	
.container scroll-view{height: 100%;}
.search-bar{display: flex;align-items: center;height: 70rpx;margin: 20rpx 30rpx 30rpx 30rpx;background-color: #f7f7f7;border-radius: 50rpx;}
.search-bar input{font-size: 28rpx;flex: 1;}
.search-bar text{margin-left: 28rpx;font-size: 26rpx;margin-right: 26rpx;}
.history{margin: 0 30rpx;font-size: 26rpx;}
.history-head{display: flex;justify-content: space-between;margin-bottom: 36rpx;}
.history-list{display: flex;flex-wrap: wrap;}
.history-list view{padding: 16rpx 28rpx;border-radius: 40rpx;margin-bottom: 30rpx;margin-right: 30rpx;background-color:#f7f7f7;}
.history-list text{margin-left: 16rpx;}
.search-hot{width: 690rpx;margin: 30rpx auto;}
.search-hot-head{width: 100%;}
.search-hot-list-item{display: flex;justify-content: space-between;margin-top: 30rpx;width: 100%;height: 116rpx;}
.hot-list-item-index{height: 100%;line-height: 100rpx;width: 78rpx;margin-right: 12rpx;text-align: center;}
.hot-list-item-people{color:lightgray;}
.search-hot-list :nth-child(1) .hot-list-item-index{color: red;}
.search-hot-list :nth-child(2) .hot-list-item-index{color: red;}
.search-hot-list :nth-child(3) .hot-list-item-index{color: red;}
.hot-list-item-inFO{display: flex; flex-direction: column;width: 400rpx;}
.item-inFO-name{font-size: 40rpx;width: 70%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;margin-top: 24rpx;}
.item-inFO-content{font-size: 30rpx; color:darkgrey;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.hot-list-item-people{height: 100%;line-height: 100rpx;width: 180rpx;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.result-list{width: 100%;margin-top: 20rpx;border-top: 2px solid #e4e4e4 ;}
.result-list-item{margin: 30rpx 30rpx; width: 690rpx;height: 100rpx;display: flex;justify-content: space-between;border-bottom: 2px solid #e4e4e4 ;}
.item-inFo{height: 100%;width: 500rpx;}
.item-inFo-name{font-size: 40rpx;color: royalblue;margin-bottom: 6rpx;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.item-inFo-msg{font-size: 25rpx;color: grey;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.item-icon{height: 100%; line-height: 100rpx;}
.item-icon text{font-size: 80rpx;color: lightgrey;}
.search-suggest{width: 690rpx;margin:10rpx 30rpx;border-top: 2px solid #e4e4e4;padding-top: 20rpx;}
.suggest-head{margin-bottom: 30rpx;color: cornflowerblue;}
.suggest-list{width: 100%;display: flex;flex-direction: column;}
.suggest-list-item{height: 80rpx;margin-bottom: 30rpx;line-height: 80rpx;font-size: 34rpx;}
.suggest-list-item text{margin-right: 20rpx;font-size: 40rpx;color: #e4e4e4;}
</style>
